<template>
  <div>
    <el-steps :active="0" class="">
      <el-step title="服务商注册信息"/>
      <el-step title="服务商信息填写"/>
      <el-step title="服务商资质认证"/>
      <el-step title="提交平台审核"/>
    </el-steps>
    <el-tabs v-model="activeName" style="padding: 0 140px;" @tab-click="handleClick">
      <el-tab-pane label="手机注册" name="tel">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="手机号:" prop="name">
            <el-input
              v-model="ruleForm.account"
              placeholder="请输入手机号"
              clearable/>
            <span class="send-code" @click="sendMessage">
              发送验证码
            </span>
          </el-form-item>
          <el-form-item label="手机验证码" prop="name">
            <el-input
              v-model="ruleForm.code"
              placeholder="请输入手机验证码"
              clearable/>
          </el-form-item>
          <el-form-item label="登录密码" prop="name">
            <el-input
              v-model="ruleForm.password"
              placeholder="请输入登录密码"
              clearable/>
          </el-form-item>
          <el-form-item label="确认" prop="name">
            <el-input
              v-model="ruleForm.repassword"
              placeholder="请输入确认密码"
              clearable/>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="checked">我已阅读 《》 协议</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleGoNext">下一步</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="邮箱注册" name="email">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="邮箱账号:" prop="name">
            <el-input
              v-model="ruleForm.account"
              placeholder="请输入邮箱"
              clearable/>
            <span class="send-code" @click="sendMessage">
              发送验证码
            </span>
          </el-form-item>
          <el-form-item label="邮箱验证码" prop="name">
            <el-input
              v-model="ruleForm.code"
              placeholder="请输入邮箱验证码"
              clearable/>
          </el-form-item>
          <el-form-item label="登录密码" prop="name">
            <el-input
              v-model="ruleForm.password"
              placeholder="请输入登录密码"
              clearable/>
          </el-form-item>
          <el-form-item label="确认" prop="name">
            <el-input
              v-model="ruleForm.repassword"
              placeholder="请输入确认密码"
              clearable/>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="checked">我已阅读 《》 协议</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleGoNext">下一步</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { isvalidUsername, IsValidatCode } from '@/utils/validate'
import { sendEmail, sendSms } from '@/api/message'
import { registered } from '@/api/login'
import md5 from 'md5'

export default {
  data() {
    return {
      ruleForm: {
        account: '',
        code: '',
        password: '',
        repassword: ''
      },
      rules: {
        account: [
          { required: true, message: '请输入账户', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'change' }
        ],
        password: [
          { type: 'date', required: true, message: '请输入密码', trigger: 'change' }
        ],
        repassword: [
          { type: 'date', required: true, message: '请输入确认密码', trigger: 'change' }
        ]
      },
      telephone: '',
      checked: true,
      activeName: 'tel'
    }
  },
  mounted() {
  },
  methods: {
    handleClick(tab, event) {

    },
    // 进行下一步
    handleGoNext() {
      const account = this.ruleForm.account
      const password = md5(this.ruleForm.password)
      const repassword = md5(this.ruleForm.repassword)
      const countrycode = 86
      const code = this.ruleForm.code
      this.loading = true
      this.$store.dispatch('Registered', {
        account: account,
        password: password,
        repassword: repassword,
        countrycode: countrycode,
        code: code
      }).then(() => {
        this.loading = false
        this.$router.push({ path: '/register/second' })
      }).catch(() => {
        this.loading = false
      })
      // console.log('hh')
      // this.$router.push('second')
    },
    // 进行发送验证码
    sendMessage() {
      if (isvalidUsername(this.ruleForm.account)) {
        if (this.ruleForm.account.indexOf('@') != -1) {
          const email = this.ruleForm.account
          sendEmail(email, 1).then(response => {
            if (response.status === 200) {
              this.serviceInfo = response.data
            } else {
              console.log(response.msg)
            }
          })
        } else {
          const mobile = this.ruleForm.account
          sendSms(mobile, 1).then(response => {
            if (response.status === 200) {
              console.log('=========')
              console.log(response.data)
            } else {
              console.log(response.msg)
            }
          })
        }
      }
    }
  }
}
</script>
<style rel="stylesheet" lang="scss" scoped>
  $blue: #2390FF;
  .send-code {
    position: absolute;
    right: 10px;
    top: 0;
    font-size: 16px;
    color: $blue;
    cursor: pointer;
    user-select: none;
  }
</style>
